<template>
    <div class="shortMessageTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">模块-短信管理表列表</span></el-divider>
        </div>

        <div class="batchOPT">
            <el-button class="batchBTN" @click="toggleSelection([shortMessages[1],shortMessages[2]])">批量删除</el-button>
        </div>
        <div class="addShortMessage">
            <el-button class="addBTN" type="primary" icon="el-icon-s-promotion" @click="addShortMessage">业务发送短信
            </el-button>
        </div>
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="shortMessages"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
            <el-table-column
                    sortable
                    fixed
                    prop="uniId"
                    label="短信ID"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="mobile"
                    label="手机号"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="name"
                    label="接收人"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="code"
                    label="验证码"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="content"
                    label="发送内容"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="use"
                    label="用途"
                    width="90"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.use === 'S' ? 'danger' : 'primary'"
                            size="mini" disable-transitions>{{SHORT_MESSAGE_USE | optionObjectKV(scope.row.use)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="status"
                    label="状态"
                    width="90"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 'D' ? 'success' : 'primary'"
                            size="mini" disable-transitions>{{SHORT_MESSAGE_STATUS | optionObjectKV(scope.row.status)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="times"
                    label="生效时间"
                    width="160"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="220">
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <!--<el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            @click="del">排序
                    </el-button>-->
                    <el-button
                            class="delButton"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>


        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>
        </div>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";

    export default {
        name: "ShortMessageSet",
        //引用组件
        components: {PageHelper},
        data() {
            return {
                message: '这里是大模块-短信管理表内容页',
                shortMessages: [],
                shortMessage: {},
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                SHORT_MESSAGE_USE: SHORT_MESSAGE_USE,
                SHORT_MESSAGE_STATUS: SHORT_MESSAGE_STATUS,
            }
        },
        mounted() {
            this.list();
            this.$refs.pageHelper.size = 10;
            this.pageList(1);
        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/shortMessage/dtoList')
                    .then((response) => {
                        console.log("模块-短信管理表列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/shortMessage/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.shortMessages = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            //3.新增shortMessage
            addShortMessage() {
                this.$router.push("/source/shortMessage/add");
            },
            //4.修改
            edit(shortMessage) {
                this.shortMessage = $.extend({}, shortMessage);
                this.$router.push({
                    name: "source/shortMessage/add",
                    params: {shortMessage}
                });
            },
            del(shortMessage) {
                let _this = this;
                let shortMessageParam = shortMessage;
                toast.showConfirm(shortMessage.content, function () {
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/shortMessage/del/' + shortMessageParam.uniId)
                            .then((response) => {

                                let resp = response.data;
                                if (resp.success) {
                                    _this.pageList(1);
                                }
                            })
                    }
                )
            },
            //更新显示show
            updateShow(row) {
                this.shortMessage = row;
                let responseMsg = '';
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/shortMessage/save', this.shortMessage)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;

                        if (resp.success) {
                            this.pageList(1);
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addShortMessage {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }
    .delButton{
        padding: 7px 30px;
    }
</style>